<template>
  <div id="login">
    <el-form ref="form"
             :model="form"
             label-width="80px">
      <el-form-item label="账号:">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="登录密码:">
        <el-input v-model="form.password"
                  :type="passwordVisible">
          <i slot="suffix"
             :class="icon"
             @click="showPass"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-radio-group v-model="form.type">
          <el-radio label="员工"></el-radio>
          <el-radio label="经理"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item id="btn">
        <el-button type="primary"
                   @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      form: {
        username: '',
        password: '',
        type: '员工',
      },
      passwordVisible: 'password',
      icon: 'el-icon-view'
    }
  },
  methods: {
    onSubmit: function () {
      this.$axios({
        url: '/yl/login/getuser',
        params: this.form,
      }).then((res) => {
        console.log(res)
        if (res.data.data.length) {
          if (res.data.data[0].user_position == "员工") {
            this.$message({
              message: '登陆成功',
              type: 'success',
              duration: 2000
            });
            this.$router.push({ path: '/employee/homepageemployee' })
            sessionStorage.setItem('user', JSON.stringify(res.data.data[0]));
            console.log(res.data);
            sessionStorage.setItem('token', res.data.token)
          } else {
            this.$message({
              message: '登陆成功',
              type: 'success',
              duration: 2000
            });
            this.$router.push({ path: '/manage/homepage' })
            sessionStorage.setItem('user', JSON.stringify(res.data.data[0]));
            sessionStorage.setItem('token', res.data.token)
          }


        } else {
          this.$message.error('账号或密码错误', {
            duration: 2000
          });
        }
      })

    },
    showPass () {
      if (this.passwordVisible === "text") {
        this.passwordVisible = "password";
        //更换图标
        this.icon = "el-icon-view";
      } else {
        this.passwordVisible = "text";
        this.icon = "el-icon-lock";
      }
    }
  }
}
</script>
<style scoped lang="less">
#login {
  height: 100%;
  background-image: url(../assets/single/Login.png);
  background-size: cover;
}
.el-form {
  width: 400px;
  height: 280px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -220px;
  margin-top: -160px;
  background: rgba(255, 255, 255, 0.3);
  padding-top: 40px;
  padding-right: 40px;
  background-color: rgb(248, 248, 248);
  border: 1px solid lightblue;
  border-radius: 5px;
}
#btn {
  text-align: center;
}
</style>